<template>
<!-- 设计师详情页面 -->
  <div id="goodsDetail">
    <Header></Header>
    <div class="gode_content">
        <div v-for="item in info" :key="item.designer_id" class="gode_content_top">
            <div class="gode_content_name"><h4>{{item.designer_name}}</h4></div>
            <div class="gode_content_img">
                <img :src="url+item.designer_image" alt="" class="image-box" id="image-box">
            </div>
        </div>
        <div class="gode_content_bottom">
          <div class="gode_bottom_html" v-for="item in info" :key="item.designer_id">
              <!-- 设计师详情 -->
                <div class="gode_bottom_text" v-html="item.designer_content" ></div>
          </div>
        </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  data () {
    return {
      info: [],     //渲染的数据
      url: "https://mp.uekea.cn/attachment/",   //图片网址拼接
    }
  },
  components: {
      Header,
      Footer,
  },
  methods: {

  },
  created () {
      var _this=this;
      let id = _this.$route.query.id;
      _this.$get(`designer/info/${id}`).then(res=>{
          if(res.code == 200) {
            if((res.data).length > 0){
              res.data[0].designer_content = res.data[0].designer_content.replace(/images\//g, 'https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/images/');
              _this.info = res.data;
            } else {
              _this.$MessageAlert(true,_this.$t('Message.error'),'error');
            }
          } else if(res.code == 404) {
            _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
          }
      })
    },
};
</script>

<style lang="less" scoped>
.gode_content {
    // width: 60%;
    min-height: calc(100vh - 61px - 240px - 100px);
    padding: 40px;
    margin: auto;
    margin-bottom: 100px;
    text-align: center;
    .gode_content_top {
        .gode_content_name {
          margin-bottom: 30px;
            h4 {
                font-size: 30px;
                font-weight: bold;
                margin-top: 50px;
                margin-bottom: 0px;
                color: black;
            }
        }
    }
    .gode_content_bottom {
        text-align: left;
        margin-top: 20px;
        padding: 35px;
        border: 1px solid #ccc;
    }
}
@media screen and (min-width: 1200px) {
    .gode_content {
        width: 65%;
    }
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
    .gode_content {
        width: 80%;
    }
}
@media screen and (max-width: 959px) {
    .gode_content {
        width: 800px;
    }
}

</style>